<template>
    <div v-loading="showList">
      <!-- 面包屑导航栏和按钮组 -->
      <el-header style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:20px;">
          <div class="flexBox" >
              <el-breadcrumb separator="/">
                  <el-breadcrumb-item :to="{ path: '/home' }"
                  >首页</el-breadcrumb-item>
                  <el-breadcrumb-item>人事调动</el-breadcrumb-item>
                  <el-breadcrumb-item>调科管理</el-breadcrumb-item>
              </el-breadcrumb>
              <div>
                  <el-button size="mini" type="primary" @click="handleHistory">全院历史记录</el-button>
              </div>
          </div>
      </el-header>
      <el-container class="flexBox1">
      <!-- 侧边栏导航菜单 -->
      <el-aside width="200px" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;position:relative">
        <div>
              <div style="margin-top:20px;padding:10px">
                  <el-input style="width: 100%;" size="small" v-model="filterText">
                      <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
              </div>
          <el-divider></el-divider>
          <el-tree
            ref="space"
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
            :load="loadNode"
            style="padding:20px"
            :filter-node-method="filterNode"></el-tree>
        </div>
      </el-aside>
      <!-- 信息表单 -->
      <el-main style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;margin-left:10px;margin-top:20px" v-loading="showData">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" >
          <el-tab-pane label="调科信息" name="first">
            <div class="form">
<!--              <el-row :gutter="0" type="flex" justify="start" align="center">-->
<!--                  <label class="el-form-item__label">调科人员：<el-tag v-model="tagData.name">{{tagData.name}}</el-tag></label>-->
<!--              </el-row>-->
<!--                <el-row :gutter="0" type="flex" justify="space-between">-->
<!--                  <label class="el-form-item__label">当前科室：<el-tag type="info" v-model="tagData.dept">{{tagData.dept}}</el-tag></label>-->
<!--                  <label class="el-form-item__label">当前职务：<el-tag type="warning" v-model="tagData.zhiwu" v-if="tagData.zhiwu!=''">{{tagData.zhiwu}}</el-tag></label>-->
<!--                  <label class="el-form-item__label">当前层级：<el-tag type="success" v-model="tagData.hljb" v-if="tagData.hljb!=''">{{tagData.hljb}}</el-tag></label>-->
<!--              </el-row>-->
<!--              <el-descriptions :column="2" >-->
<!--                <el-descriptions-item label="调科人员" :span="2">{{tagData.name}}</el-descriptions-item>-->
<!--                <el-descriptions-item label="当前科室">{{tagData.dept}}</el-descriptions-item>-->
<!--                <el-descriptions-item label="当前职务">{{tagData.zhiwu}}</el-descriptions-item>-->
<!--                <el-descriptions-item label="当前层级">{{tagData.hljb}}</el-descriptions-item>-->
<!--              </el-descriptions>-->
              <el-card shadow="never">
<!--                <template slot="header">-->
<!--                  <span style="font-size: 14px;font-weight: bold">人员信息</span>-->
<!--                </template>-->
                <div style="display: flex;justify-content: space-around">
                  <label class="label">调科人员： <span class="infoTitle">{{tagData.name}}</span></label>
                  <label class="label" style="visibility: hidden">当前职务： <span class="infoTitle">{{tagData.zhiwu}}</span></label>
                  <label class="label" style="visibility: hidden">当前层级： <span class="infoTitle">{{tagData.hljb}}</span></label>
                </div>
                <el-divider></el-divider>
<!--                TODO 解决样式问题-->
                <div style="display: flex;justify-content: space-around">
                  <label class="label">当前科室： <span class="infoTitle">{{tagData.dept}}</span></label>
                  <label class="label">当前职务： <span class="infoTitle">{{tagData.zhiwu}}</span></label>
                  <label class="label">当前层级： <span class="infoTitle">{{tagData.hljb}}</span></label>
                </div>
              </el-card>
              <el-divider></el-divider>
              <el-card shadow="never">
                <el-form>
                  <el-row :gutter="0" type="flex" justify="space-between">
                    <el-form-item label="调往科室">
                      <el-select v-model="form.to">
                        <el-option v-for="item in deptList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.label"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item  label="调往职务">
                      <el-select v-model="form.duties">
                        <el-option v-for="item in dutiesList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.label"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="到岗时间">
                      <el-date-picker v-model="form.time" value-format="yyyy-MM-dd" type="date" :picker-options="startDate"></el-date-picker>
                    </el-form-item>
                  </el-row>
                  <el-row :gutter="0">
                    <el-col :span="24" >
                      <el-form-item label="调科原因">
                        <el-input type="textarea" v-model="form.reason"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="0">
                    <el-col :span="24" >
                      <el-form-item>
                        <el-button type="primary" @click="submit" size="mini">提交</el-button>
                        <el-button size="mini">返回</el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </el-card>

            </div>
          </el-tab-pane>
          <el-tab-pane label="个人历史记录" name="second" >
              <el-table
                v-loading="showHistory"
                :data="tableData"
                border
                height="500"
                style="width: 100%"
                :header-cell-style="{ background: 'rgb(245,247,250)' }">
                <el-table-column
                  prop="name"
                  label="姓名">
                </el-table-column>
                <!-- <el-table-column
                  prop="name"
                  label="类别">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="类型">
                </el-table-column> -->
                <el-table-column
                  prop="from"
                  label="调出科室">
                </el-table-column>
                <el-table-column
                  prop="to"
                  label="调入科室">
                </el-table-column>
                <!-- <el-table-column
                  prop="address"
                  label="职称">
                </el-table-column> -->
                <el-table-column
                  prop="duties"
                  label="职务">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="到岗时间">
                </el-table-column>
                <el-table-column
                  prop="reason"
                  label="调科原因">
                </el-table-column>
                <el-table-column
                  prop="handleMan"
                  label="操作人">
                </el-table-column>
                <!-- <el-table-column
                  prop="address"
                  label="操作原因">
                </el-table-column> -->
              </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>

      </el-container>
        <el-dialog title="全院历史记录" :visible.sync="dialogTableVisible" :modal-append-to-body='false' >
          <el-table
                :data="hospitalData"
                v-loading="showHospital"
                border
                style="width: 100%"
                height="500"
                :header-cell-style="{ background: 'rgb(245,247,250)' }">
                <el-table-column
                  prop="name"
                  label="姓名">
                </el-table-column>
                <!-- <el-table-column
                  prop="name"
                  label="类别">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="类型">
                </el-table-column> -->
                <el-table-column
                  prop="from"
                  label="调出科室">
                </el-table-column>
                <el-table-column
                  prop="to"
                  label="调入科室">
                </el-table-column>
                <!-- <el-table-column
                  prop="address"
                  label="职称">
                </el-table-column> -->
                <el-table-column
                  prop="duties"
                  label="职务">
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="到岗时间">
                </el-table-column>
                <el-table-column
                  prop="reason"
                  label="调科原因">
                </el-table-column>
                <el-table-column
                  prop="handleMan"
                  label="操作人">
                </el-table-column>
                <!-- <el-table-column
                  prop="address"
                  label="操作原因">
                </el-table-column> -->
              </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="offset"
              :page-sizes="[20, 40, 60, 80]"
              :page-size="rowsOfPage"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </el-dialog>
    </div>

</template>
<script>
import TaskManager from '../service/TaskManager'
export default {
    name:"",
    watch:{
      filterText(val) {
          this.$refs.space.filter(val)
        }
    },
    data(){
        return{
          startDate:{
            disabledDate:(time)=>{
              return time.getTime() < Date.now() - 8.64e7
            }
          },
        filterText:'',
        showHospital:false,
        showHistory:false,
        total:20,
        offset:1,
        rowsOfPage:20,
        hospitalData:[],
        showList:true,
        showData:false,
        activeName:"first",
        dialogTableVisible:false,
        data: [],
        tableData:[],
        deptList:[],
        dutiesList:[],
        defaultProps: {
          children: 'children',
          label: 'label',
          isLeaf: true
        },
        temp:"暂无数据",
        form:{
          to:"",
          duties:"",
          time:"",
          reason:""
        },
        tagData:{
          id:"",
          name:"",
          dept:"",
          zhiwu:"",
          hljb:""
        }
      };
    },
    methods:{
      handleClick(){
        this.showHistory=true;
        this.tableData=[];
        if(this.activeName=='second'){
          TaskManager.getTransferHistory({id:this.tagData.id}).then((res)=>{
            this.tableData=res.data.data;
            this.showHistory=false;
          })
        }
      },
      handleHistory(){
        this.dialogTableVisible=true;
        this.showHospital=true;
        this.hospitalData=[];
         TaskManager.getTransferHistory({id:"all"}).then((res)=>{
            this.hospitalData=res.data.data;
            this.total=res.data.count;
            this.showHospital=false;
          })
      },
      getTime(){
        let date=new Date().toLocaleString().split(' ')[0];
        let time=new Date().toLocaleString().split(' ')[1];
        let Now=date+" "+time;
        return Now;
      },
      submit(){
        this.showData=true;
        let params=this.form;
        params.name=this.tagData.name;
        params.id=this.tagData.id;
        params.from=this.tagData.dept;
        params.handleMan=`${window.localStorage.dept} ${window.localStorage.name}`;
        console.log(params);
        TaskManager.addTransfer(params).then((res)=>{
          if(res.data=='success'){
            this.showData=false;
            this.$message({
              type:'success',
              message:'调科信息提交成功！'
            })
            let paramss={
              name:"调科通知",
              message:`您有新的调科通知：【${window.localStorage.dept}-${window.localStorage.name}】将您调往【${this.form.to}】，时间为【${this.form.time}】`,
              date:this.getTime(),
              id:this.tagData.id
            }
            TaskManager.setMessage(paramss);
          }else{
            this.showData=false;
            this.$message({
              type:'error',
              message:'调科信息提交失败！'
            })
          }
        })
      },
      loadTree(){
        let params={name:''}
        TaskManager.getDeptTreeList(params)
        .then((res)=>{
          for(let key in res.data){
            if(res.data[key].科室!=''){
              let item={};
              item.id=key;
              item.label=res.data[key].科室;
              item.children=[];
              this.data.push(item);
            }
          }
          console.log(this.data)
          this.showList=false;
        })
      },
      loadTreeData(node){
        console.log(node)
        if(node.children.length=='0'){
            let params={name:node.label}
            TaskManager.getDeptTreeList(params)
              .then((res)=>{
                for(let _key in res.data){
                  let item={};
                  item.label=res.data[_key].姓名;
                  this.data[node.id].children.push(item);
              }
            })
        }
      },
      loadData(val){
        let params={name:val}
        TaskManager.getDeptTreeData(params)
        .then((res)=>{
          console.log(res)
          this.tagData={
              name:val,
              dept:res.data[0].科室,
              zhiwu:res.data[0].管理职务,
              hljb:res.data[0].人员层级,
              id:res.data[0].工号
          }
          this.showData=false;
        })
      },
      loadNode(node){
          if (node.level === 0) {
            return resolve([]);
          }
          if (node.level > 1) return resolve([]);
          setTimeout(() => {
            this.loadTreeData(res)
          }, 500);
      },
      handleNodeClick(res){
        console.log(res)
        if(res.children==undefined){
          this.showData=true;
          this.loadData(res.label)
        }
        else{
          this.loadTreeData(res)
        }
      },
      filterNode(value, data) {
      if (!value) {
        return true
      }
        return data.label.indexOf(value) !== -1;
      // let level = node.level
      // let _array = [] //这里使用数组存储 只是为了存储值。
      // this.getReturnNode(node, _array, value)
      // let result = false
      // _array.forEach(item => {
      //   result = result || item
      // })
      // return result
    },
    getReturnNode(node, _array, value) {
      let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
      isPass ? _array.push(isPass) : ''
      this.index++
      console.log(this.index)
      if (!isPass && node.level != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value)
      }
    }
    },
    mounted(){
      this.loadTree();
      TaskManager.getDictionary({temp:'dept'}).then((res=>{
        this.deptList=res.data;
      }))
      TaskManager.getDictionary({temp:'glzw'}).then((res=>{
        this.dutiesList=res.data;
      }))
    }
}
</script>
<style scoped>
.el-aside{
    background-color: white;
    margin-top: 20px;
}
.el-divider{
    margin: 10px 0;
}
.el-input{
    width: 200px;
}
.form{
  width: 60%;
}
.el-row{
    margin: 20px 0;
}
.el-main{
  height: 736px;
}
.el-tree{
  height: 645px;
  overflow: hidden;
  overflow-y: scroll;
}
/* /deep/.el-dialog{
  padding-bottom: 20px !important;
} */
.block{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
}
.label{
  font-size: 14px;
  color: #9a9a9a;
}
.infoTitle{
  font-size: 14px;
  /*font-weight: bold;*/
  color: black;
}
</style>
